<template>
  <div class="special-apply">
    <div class="special-top">
      当前位置：<el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="item.url" v-for="(item ,index) in breadcrumb" :key="index">{{item.name}}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="gray-line"></div>
    <div class="special-wrapper">
      <div class="special-title">
        <el-icon class="el-icon-guide"></el-icon>
        <span>价格设置</span>
      </div>
      <div class="row-line">
        <div class="row-cell">
          <span class="row-label">模板名称</span>
          <el-input class="row-ipt" v-model="template_title" size="medium" placeholder="请输入模板名称"></el-input>
          <span class="hintStr">*</span>
        </div>
      </div>

      <div class="base-price">
        <span class="row-label">基础价格</span>

        <el-popover placement="top" width="280" v-model="visible">
          <p class="popover-content">“同步价格”将会将基础价格同步到刷卡打水、投币打水、微信打水、支付宝打水,请谨慎操作</p>
          <div class="align-right">
            <el-button type="primary" size="mini" @click="visible = false">我知道了</el-button>
          </div>
          <i slot="reference" class="el-icon-question question-icon"></i>
        </el-popover>


        <div class="base-price-cell">
          <div class="base-price-config">
            <span>配置</span>
            <div class="base-price-inline">
              <span>打水量</span>
              <el-input size="medium" v-model="base_thrash_config.rise" class="base-price-inline-ipt" type="number">
              </el-input>
              <span>升</span>
            </div>
            <div class="base-price-inline">
              <span>金额</span>
              <el-input size="medium" v-model="base_thrash_config.money" class="base-price-inline-ipt" type="number">
              </el-input>
              <span>元</span>
            </div>
          </div>
          <el-button type="primary" @click="confirmSyncPrice('all')" class="sync-price-btn">
            <span>同步</span>
            <span>价格</span>
          </el-button>
        </div>
      </div>


      <div class="base-price">
        <div class="advance-title-wrapper">
          <span class="row-label">高级设置</span>
          <div @click="toggleFold" class="addvance-expand">{{is_unfold?'收起':'展开'}}
            <i class="el-icon-arrow-down" v-if="!is_unfold"></i>
            <i class="el-icon-arrow-up" v-else></i>
          </div>
        </div>
        <el-collapse-transition>
          <div v-show="is_unfold" class="advance-config">
            <div class="advance-config-cell">
              <div class="advance-config-header">
                <span class="advance-header-span">刷卡打水</span>
                <el-button @click="syncPrice('card')" size="mini" class="advance-sync-btn">同步</el-button>
              </div>
              <div class="advance-config-child">
                <span>配置</span>
                <div class="base-price-inline">
                  <span>打水量</span>
                  <el-input size="medium" :disabled="true" v-model="card_thrash_config.rise"
                    class="base-price-inline-ipt" type="number">
                  </el-input>
                  <span>升</span>
                </div>
                <div class="base-price-inline">
                  <span>金额</span>
                  <el-input size="medium" v-model="card_thrash_config.money" class="base-price-inline-ipt"
                    type="number">
                  </el-input>
                  <span>元</span>
                </div>
                <div class="addvance-blank"></div>
              </div>
              <div class="addvance-bottom">
                <div class="base-price-inline">
                  <span>预扣费取水量</span>
                  <el-input size="medium" v-model="card_thrash_config.withholding_fee_rise"
                    class="base-price-inline-ipt" type="number"></el-input>
                  <span>升</span>
                </div>
              </div>
            </div>

            <div class="advance-config-cell">
              <div class="advance-config-header">
                <span class="advance-header-span">投币打水</span>
                <el-button @click="syncPrice('coin')" size="mini" class="advance-sync-btn">同步</el-button>
              </div>
              <div class="advance-config-child">
                <span>配置</span>
                <div class="base-price-inline">
                  <span>打水量</span>
                  <el-input :disabled="true" size="medium" v-model="coin_thrash_config.rise"
                    class="base-price-inline-ipt" type="number">
                  </el-input>
                  <span>升</span>
                </div>
                <div class="base-price-inline">
                  <span>金额</span>
                  <el-input size="medium" v-model="coin_thrash_config.money" class="base-price-inline-ipt"
                    type="number">
                  </el-input>
                  <span>元</span>
                </div>
                <div class="addvance-blank"></div>
              </div>
              <div class="addvance-bottom">
                <div class="base-price-inline">
                  <span>投币金额上限</span>
                  <el-input size="medium" v-model="coin_thrash_config.coin_upper_limit" class="base-price-inline-ipt"
                    type="number"></el-input>
                  <span>升</span>
                </div>
                <div class="base-price-inline">
                  <span>预扣费取水量</span>
                  <el-input size="medium" v-model="coin_thrash_config.withholding_fee_rise"
                    class="base-price-inline-ipt" type="number"></el-input>
                  <span>升</span>
                </div>
              </div>
            </div>


            <div class="advance-config-cell">
              <div class="advance-config-header">
                <span class="advance-header-span">微信打水</span>
                <el-button @click="syncPrice('wechat')" size="mini" class="advance-sync-btn">同步</el-button>
              </div>
              <div class="advance-config-child" v-for="(item,index) in wechat_thrash_config" :key="index">
                <span>配置</span>
                <div class="base-price-inline">
                  <span>打水量</span>
                  <el-input :disabled="item.is_default" v-model="item.rise" size="medium" class="base-price-inline-ipt"
                    type="number">
                  </el-input>
                  <span>升</span>
                </div>
                <div class="base-price-inline">
                  <span>金额</span>
                  <el-input size="medium" v-model="item.money" class="base-price-inline-ipt" type="number"></el-input>
                  <span>元</span>
                </div>
                <i @click="handlePlusWechatItem"
                  v-if="wechat_thrash_config.length<wechat_max_number && wechat_thrash_config.length==index+1"
                  class="el-icon-circle-plus icon-plus"> </i>
                <i @click="handleRemoveWechatItem(index)" v-else class="el-icon-remove icon-plus"></i>
              </div>
            </div>


            <div class="advance-config-cell">
              <div class="advance-config-header">
                <span class="advance-header-span">支付宝打水</span>
                <el-button @click="syncPrice('alipay')" size="mini" class="advance-sync-btn">同步</el-button>
              </div>
              <div class="advance-config-child" v-for="(item,index) in alipay_thrash_config" :key="index">
                <span>配置</span>
                <div class="base-price-inline">
                  <span>打水量</span>
                  <el-input :disabled="item.is_default" v-model="item.rise" size="medium" class="base-price-inline-ipt"
                    type="number">
                  </el-input>
                  <span>升</span>
                </div>
                <div class="base-price-inline">
                  <span>金额</span>
                  <el-input size="medium" v-model="item.money" class="base-price-inline-ipt" type="number"></el-input>
                  <span>元</span>
                </div>
                <i @click="handlePlusAlipayItem"
                  v-if="alipay_thrash_config.length<wechat_max_number && alipay_thrash_config.length==index+1"
                  class="el-icon-circle-plus icon-plus"> </i>
                <i @click="handleRemoveAlipayItem(index)" v-else class="el-icon-remove icon-plus"></i>
              </div>
            </div>
          </div>
        </el-collapse-transition>
      </div>


      <div class="special-title">
        <el-icon class="el-icon-date"></el-icon>
        <span>打水配置</span>
      </div>

      <div class="row-line">
        <div class="row-cell">
          <span class="row-label">有效期限</span>
          <el-select size="medium" style="width: 360px;" v-model="currentLimit" class="row-ipt" placeholder="请选择有效期">
            <el-option filterable v-for="item in limits" :value="item.value" :label="item.name" :key="item.value">
            </el-option>
          </el-select>
          <span class="hintStr">*</span>
        </div>

      </div>

      <div class="row-line" v-if="currentLimit==1">
        <div class="row-cell">
          <span class="row-label"></span>
          <template>
            <el-date-picker class="picker-date" value-format="yyyy-MM-dd" v-model="start_time" size="medium" type="date"
              placeholder="选择开始日期">
            </el-date-picker>
            <el-date-picker value-format="yyyy-MM-dd" class="m-l-10 picker-date" v-model="end_time" size="medium"
              type="date" placeholder="选择结束日期">
            </el-date-picker>
          </template>
          <span class="hintStr">*</span>
        </div>
      </div>


      <div class="row-line submit">
        <el-button size="medium" @click="submit" type="primary" class="submit-btn">确定</el-button>
      </div>
    </div>
  </div>
</template>
<script>
  const WECHAT_MAX_NUMBER = 3; //微信打水配置的最大数量
  const ALIPAY_MAX_NUMBER = 3; //支付宝打水配置的最大数量
  const limits = [{
    value: 2,
    name: "永久有效"
  }, {
    value: 1,
    name: "有效时间"
  }];
  export default {
    name: "priceTemplateAdd",
    data() {
      return {
        visible: false,
        breadcrumb: [],
        base_thrash_config: { //基础打水配置
          rise: '',
          money: ''
        },
        card_thrash_config: { //刷卡打水配置
          rise: "",
          money: "",
          withholding_fee_rise: 7.5,
        },
        coin_thrash_config: { //投币打水配置
          rise: "",
          money: "",
          coin_upper_limit: 10,
          withholding_fee_rise: 7.5,
        },
        wechat_thrash_config: [ //微信打水配置
          {
            rise: 1,
            money: "",
            is_default: true,
          }, {
            rise: 7.5,
            money: "",
            is_default: true,
          }, {
            rise: 18.9,
            money: "",
            is_default: true,
          }
        ],
        alipay_thrash_config: [ //支付宝打水配置
          {
            rise: 1,
            money: "",
            is_default: true,
          }, {
            rise: 7.5,
            money: "",
            is_default: true,
          }, {
            rise: 18.9,
            money: "",
            is_default: true,
          }
        ],

        wechat_max_number: WECHAT_MAX_NUMBER,
        alipay_max_number: ALIPAY_MAX_NUMBER,
        is_unfold: false, //是否展开 默认不展开
        template_title: "", //模板名称
        limits,
        mode: 1, //1添加 2编辑
        type: 2, //2价格模板 1用户自助充值模板 3代客充值模板
        end_time: "", //有效期之结束时间
        start_time: '', //有效期之开始时间
        currentLimit: 2, //选中的有效期
        template_status: 1, //状态，1：开启，2：关闭
        isTapSyncPrice: false, //是否点击过同步价格
        is_device: this.$route.query.is_device ? true : false,
      }
    },

    created() {
      this.mode = this.$route.query.id ? 2 : 1;
      if (this.mode == 2) {
        this.getTemplate(this.$route.query.id);
      }
      this.breadcrumb = [
        { url: "", name: "经营设置" },
        { url: "/onlineTemplate", name: "价格模板" },
        { url: "", name: `${this.mode == 1 ? '添加模板' : '编辑模板'}` }
      ];
    },

    beforeRouteEnter(to, from, next) {
      next();
    },
    //离开之前 将新增的id返回到路由中 一个新增一个编辑
    beforeRouteLeave(to, from, next) {
      if (to.path == '/deviceadd' || to.path == '/edit' || to.path == '/management') {
        to.meta.template_id = this.template_id;
      }
      next();
    },

    methods: {
      getTemplate(id) {
        this.$post({
          url: "Partner/Village/templateDetail",
          data: {
            template_id: id
          }, success: res => {
            if (res.code == 1000) {
              let data = res.data;

              this.card_thrash_config = {
                rise: data.template_whole.card ? data.template_whole.card.rise : '',
                money: data.template_whole.card ? data.template_whole.card.money : '',
                withholding_fee_rise: data.template_whole.card ? data.template_whole.card.water_quantity : this.card_thrash_config.withholding_fee_rise
              }
              this.coin_thrash_config = {
                rise: data.template_whole.coin ? data.template_whole.coin.rise : '',
                money: data.template_whole.coin ? data.template_whole.coin.money : '',
                coin_upper_limit: data.template_whole.coin ? data.template_whole.coin.coin_money : this.coin_thrash_config.coin_upper_limit,
                withholding_fee_rise: data.template_whole.coin && data.template_whole.coin.water_quantity ? data.template_whole.coin.water_quantity : this.coin_thrash_config.withholding_fee_rise,
              }
              this.is_unfold = true;
              if (data.template_whole.wx) {
                this.wechat_thrash_config = data.template_whole.wx;
              }
              if (data.template_whole.al) {
                this.alipay_thrash_config = data.template_whole.al;
              }
              this.base_thrash_config = Object.assign(this.base_thrash_config, data.base_price);
              this.template_status = data.template_status;
              this.currentLimit = parseInt(data.template_type);
              this.start_time = data.template_type == 1 ? this.formatTime(data.start_time) : '';
              this.end_time = data.template_type == 1 ? this.formatTime(data.end_time) : '';
              this.template_title = data.template_title;
              console.log(res.data)
            } else {
              this.$message.error(res.messsage);
            }
          }, error: e => {
            this.$message.error("网络错误");
          }
        })
      },
      formatTime(str) {
        let result = "";
        if (str.length >= 10) {
          result = str.substring(0, 10);
        }
        return result;
      },
      toggleFold() {
        this.is_unfold = !this.is_unfold;
      },
      //同步价格
      confirmSyncPrice(type) {
        const base_thrash_config = this.base_thrash_config;
        if (base_thrash_config.rise === "") {
          this.$message.error("请配置基础价格打水量");
          return;
        }
        if (base_thrash_config.money === "") {
          this.$message.error("请配置价格金额");
          return;
        }

        if (type == "all") {
          this.$confirm('将同步所有配置项, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(() => {
            this.syncPrice(type)
          }).catch(() => {

          });
        } else {
          this.syncPrice(type);
        }

      },

      //同步操作
      syncPrice(type) {
        const base_thrash_config = this.base_thrash_config;
        if (base_thrash_config.rise === "") {
          this.$message.error("请配置基础价格打水量");
          return;
        }
        if (base_thrash_config.money === "") {
          this.$message.error("请配置价格金额");
          return;
        }
        const ratio = base_thrash_config.money / base_thrash_config.rise;
        if (type == "all" || type == "card") {
          //同步刷卡打水
          let card_thrash_config = this.card_thrash_config;
          Object.assign(card_thrash_config, base_thrash_config);
          this.card_thrash_config = card_thrash_config;
        }
        if (type == "all" || type == "coin") {
          //同步投币打水   0.5（五毛）的倍数
          let coin_thrash_config = this.coin_thrash_config;
          let money_arr = base_thrash_config.money.toString().split(".");
          if (money_arr.length >= 2 && money_arr[1] !== "") {
            if ("0." + money_arr[1] < 0.5) {
              coin_thrash_config.money = parseInt(money_arr[0]) + 0.5;
            } else if ("0." + money_arr[1] > 0.5) {
              coin_thrash_config.money = parseInt(money_arr[0]) + 1;
            } else {
              coin_thrash_config.money = base_thrash_config.money;
            }
          } else {
            coin_thrash_config.money = base_thrash_config.money;
          }
          coin_thrash_config.rise = base_thrash_config.rise;
          this.coin_thrash_config = coin_thrash_config;
        }
        if (type == "all" || type == "wechat") {
          //同步微信打水
          let wechat_thrash_config = this.wechat_thrash_config;
          wechat_thrash_config.forEach(item => {
            if (item.rise) {
              item.money = (item.rise * ratio).toFixed(2) - 0;
            }
          })
          this.wechat_thrash_config = wechat_thrash_config;
        }
        if (type == "all" || type == "alipay") {
          //同步支付宝打水
          let alipay_thrash_config = this.alipay_thrash_config;
          alipay_thrash_config.forEach(item => {
            if (item.rise) {
              item.money = (item.rise * ratio).toFixed(2) - 0;
            }
          })
          this.alipay_thrash_config = alipay_thrash_config;
        }
        if (type == "all") {
          this.isTapSyncPrice = true;
        }

      },


      submit() {
        if (this.template_title == "") {
          this.$message.error("请输入模板名称");
          return;
        }
        const base_thrash_config = this.base_thrash_config;
        if (base_thrash_config.rise == "") {
          this.$message.error("请配置基础价格打水量");
          return false;
        }
        if (base_thrash_config.money == "") {
          this.$message.error("请配置基础价格金额");
          return false;
        }
        let base_price = {
          ...base_thrash_config
        };
        if (this.mode == 1 && !this.isTapSyncPrice) {
          this.$message.error("请先同步价格");
          return false;
        }
        let template = {};
        let card_thrash_config = this.card_thrash_config;
        if (card_thrash_config.rise == "") {
          this.$message.error("刷卡打水量未配置");
          return false;
        }
        if (card_thrash_config.money == "") {
          this.$message.error("刷卡打水金额未配置");
          return false;
        }
        if (card_thrash_config.withholding_fee_rise === "") {
          this.$message.error("刷卡打水预扣费取水量未配置");
          return false;
        }
        template.card = {
          rise: card_thrash_config.rise,
          money: card_thrash_config.money,
          water_quantity: card_thrash_config.withholding_fee_rise,
        };

        let coin_thrash_config = this.coin_thrash_config;
        if (coin_thrash_config.rise == "") {
          this.$message.error("投币打水量未配置");
          return false;
        }
        if (coin_thrash_config.money == "") {
          this.$message.error("投币打水金额未配置");
          return false;
        }
        if (coin_thrash_config.coin_upper_limit === "") {
          this.$message.error("投币金额上限未配置");
          return false;
        }
        if (coin_thrash_config.withholding_fee_rise === "") {
          this.$message.error("投币打水预扣费取水量未配置");
          return false;
        }
        template.coin = {
          rise: coin_thrash_config.rise,
          money: coin_thrash_config.money,
          coin_money: coin_thrash_config.coin_upper_limit,
          water_quantity: coin_thrash_config.withholding_fee_rise,
        };
        let wechat = [];
        let wechat_thrash_config = this.wechat_thrash_config;
        for (let i = 0; i < wechat_thrash_config.length; i++) {
          if (wechat_thrash_config[i].rise == "") {
            this.$message.error(`微信打水第${i + 1}项打水量未配置`);
            return false;
          }
          if (wechat_thrash_config[i].money == "") {
            this.$message.error(`微信打水第${i + 1}项金额未配置`);
            return false;
          }
          wechat.push({
            rise: wechat_thrash_config[i].rise,
            money: wechat_thrash_config[i].money
          });
        }
        template.wx = wechat;
        let alpay = [];
        let alipay_thrash_config = this.alipay_thrash_config;
        for (let i = 0; i < alipay_thrash_config.length; i++) {
          if (alipay_thrash_config[i].rise == "") {
            this.$message.error(`支付宝打水第${i + 1}项打水量未配置`);
            return false;
          }
          if (alipay_thrash_config[i].money == "") {
            this.$message.error(`支付宝打水第${i + 1}项金额未配置`);
            return false;
          }
          alpay.push({
            rise: alipay_thrash_config[i].rise,
            money: alipay_thrash_config[i].money
          });
        }
        template.al = alpay;
        if (this.currentLimit == 1) {
          if (this.start_time == "") {
            this.$message.error("请选择开始时间");
            return;
          }
          if (this.end_time == "") {
            this.$message.error("请选择结束时间");
            return;
          }
          if (new Date(this.start_time).getTime() > new Date(this.end_time).getTime()) {
            this.$message.error("结束时间不能小于开始时间");
            return false;
          }
        }
        const data = {
          template,
          base_price,
          template_type: this.currentLimit,
          template_title: this.template_title,
          start_time: this.currentLimit == 1 ? this.start_time : '',
          end_time: this.currentLimit == 1 ? this.end_time : '',
          template_status: this.template_status,
        }
        let url = "Partner/Village/addWaterTemplate";
        if (this.mode == 2) {
          Object.assign(data, {
            template_id: this.$route.query.id
          })
        }
        const loading = this.$loading({
          lock: true,
          text: '数据处理中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.$post({
          url,
          data,
          success: res => {
            loading.close();
            if (res.code == 1000) {
              this.$message.success(res.message);
              if (this.is_device) {
                this.template_id = res.data.template_id;
                setTimeout(() => { this.$router.go(-1) }, 1500)
              } else {
                setTimeout(() => {
                  this.$router.push({ path: "/onlineTemplate" });
                }, 2000)
              }

            } else {
              this.$message.error(res.message);
            }
          }, error: err => {
            loading.close();
            this.$message.error(`网络错误`);
          }
        })

      },

      //添加支付宝打水配置项
      handlePlusAlipayItem() {
        this.alipay_thrash_config.push({
          rise: '',
          money: ''
        });;
      },

      //删除支付宝打水配置项
      handleRemoveAlipayItem(index) {
        this.alipay_thrash_config.splice(index, 1);
      },

      //添加微信打水配置项
      handlePlusWechatItem() {
        this.wechat_thrash_config.push({
          rise: '',
          money: ''
        });;
      },
      //删除微信打水配置项
      handleRemoveWechatItem(index) {
        this.wechat_thrash_config.splice(index, 1);
      }
    },
  }
</script>
<style scoped>
  .hintStr {
    padding-left: 10px;
    color: #FF6565;
  }

  .special-top {
    display: flex;
    align-items: center;
    height: 60px;
    padding: 0 24px;
  }

  .gray-line {
    height: 12px;
    width: 100%;
    background: #fafafa;
  }

  .special-title {
    padding: 35px 0 0 25px;
    color: #2C5586;
  }

  .row-line {
    display: flex;
    align-items: center;
    width: 800px;
    justify-content: space-between;
    padding-left: 31px;
  }




  .row-cell {
    display: flex;
    align-items: center;
    margin-top: 20px;
  }

  .row-label {
    flex-shrink: 0;
    display: inline-block;
    width: 80px;
    text-align: right;
    margin-right: 10px;
    font-size: 14px;
  }

  .row-ipt {
    width: 360px;
  }




  .base-price {
    padding-left: 31px;
    margin-top: 20px;
  }

  .question-icon {
    cursor: pointer;
    color: #FF6565;
  }

  .base-price-cell {
    display: flex;
    align-items: center;
    padding-left: 22px;
    margin-top: 10px;
  }

  .base-price-config {
    border-radius: 10px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: #F2F2F2;
    width: 420px;
    line-height: 60rpx;
  }

  .base-price-inline {
    display: flex;
    align-items: center;
  }

  .base-price-inline-ipt {
    width: 80px;
    margin: 0 5px;


  }



  .sync-price-btn {
    height: 58px;
    width: 80px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 15px;
  }

  .sync-price-btn span {
    display: block;
    margin: 5px;
  }

  .advance-title-wrapper {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    width: 445px;
  }

  .advance-title-wrapper i {
    margin-left: 5px;
  }


  .advance-config {
    width: 910px;
    background: #F2F2F2;
    border-radius: 10px;
    margin-top: 20px;
    margin-left: 20px;
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
  }

  .advance-config-cell {
    width: 445px;
    height: 163px;
    background: #FFFFFF;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 15px;
    margin: 5px;
  }

  .advance-config-cell:nth-of-type(2n) {
    margin-right: 0;
  }

  .advance-config-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .advance-sync-btn {
    width: 52px;
    height: 24px;
    background: #259CAA;
    border-radius: 10px;
    margin-left: 15px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .advance-header-span {
    font-weight: bold;
  }

  .advance-config-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    margin: 8px 0;
  }

  .advance-config-child:first-child {
    margin: 0;
  }

  .addvance-bottom {
    border-top: 1px dotted #F2F2F2;
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .addvance-bottom .base-price-inline {
    margin-top: 15px;
  }

  .addvance-blank {
    width: 26px;
    height: 26px;
  }


  .icon-plus {
    font-size: 26px;
    color: #2C5586;
    cursor: pointer;
  }

  .m-l-10 {
    margin-left: 10px;
  }

  .submit-btn {
    width: 80px;
    margin-top: 30px;
    margin-left: 20px;
    margin-bottom: 50px;
  }

  .align-right {
    text-align: right;
    margin: 0
  }

  .popover-content {
    padding: 10px 0;
  }

  .mr-10 {
    margin-right: 10px;
  }

  .picker-date {
    width: 175px !important;
  }
</style>
<style>
  .base-price-inline .el-input--medium .el-input__inner {
    height: 30px;
    line-height: 30px;
  }
</style>
